<template>
  <div class="historical--order">
    <el-form :model="searchForm" label-position="right" label-width="102px">
      <el-form-item label="泊链comID:">
        <el-input v-model="searchForm.comId" placeholder="泊链comId" />
      </el-form-item>

      <el-form-item label="车场厂商编号:">
        <el-input v-model="searchForm.parkUnionId" clearable placeholder="停车场厂商编号" @change="" />
      </el-form-item>

      <el-form-item label="停车场ID:">
        <el-input v-model="searchForm.parkId" placeholder="泊链停车场ID" />
      </el-form-item>

      <el-form-item label="车牌号:">
        <el-input v-model="searchForm.carNum" placeholder="车牌号" />
      </el-form-item>

      <el-form-item label="订单号:">
        <el-input v-model="searchForm.orderCode" placeholder="进出场订单号" />
      </el-form-item>

      <el-form-item label="查询日期:" style="width: 450px;">
        <el-date-picker
          v-model="searchForm.time"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          @change="changeTime"
        />
      </el-form-item>

      <el-form-item style="width: 50px;">
        <el-button size="mini" type="primary" @click="getBolianOrderHistory">查询</el-button>
      </el-form-item>
    </el-form>

    <p>总金额：{{ totalMoney }}元</p>

    <el-table :data="tableData" border>
      <el-table-column label="车牌号" prop="car_number" align="center" />
      <el-table-column label="进场时间" prop="in_time" align="center" />
      <el-table-column label="出场时间" prop="out_time" align="center" />
      <el-table-column label="金额" prop="money" align="center" />
      <el-table-column label="停车场名称" prop="park_name" align="center" />
      <el-table-column label="交易流水号" prop="trade_no" align="center" />
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['bolianComId', 'bolianParkUnionId', 'bolianParkId', 'orderCode', 'carNumber'],
  data() {
    return {
      searchForm: {
        page: 1,
        size: 10,
        time: [],
        comId: null,
        parkUnionId: null,
        parkId: null,
        orderCode: null,
        carNum: null
      },
      totalMoney: 0,
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }

    }
  },
  created() {
    this.searchForm.comId = this.bolianComId
    this.searchForm.parkUnionId = this.bolianParkUnionId
    this.searchForm.parkId = this.bolianParkId
    this.searchForm.orderCode = this.orderCode
    this.searchForm.carNum = this.carNumber
  },
  mounted() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const startTime = year + '-' + month + '-' + day + ' ' + '00:00:00';
    const endTime = year + '-' + month + '-' + day + ' ' + '23:59:59';
    this.searchForm.time.push(startTime);
    this.searchForm.time.push(endTime)
  },
  methods: {
    getBolianOrderHistory() {
      this.$axios({
        method: 'post',
        url: '/order/trade-record/getBolianOrderHistory',
        data: this.searchForm
      }).then((res) => {
        this.tableData = res.data.data;
        this.totalMoney = res.data.totalMoney;
      })
    },

    changeTime(v) {
      this.searchForm.startTime = v[0];
      this.searchForm.endTime = v[1];
    }

  }
}
</script>

<style scoped>
  .el-form {
    width: 980px;
    margin: 0 auto;
  }

  .el-form-item {
    width: 240px;
    display: inline-block;
  }

  .el-input {
    width: 140px;
  }

</style>
